<template>
  <!-- 页面布局card通用组件 -->
  <PageCard>
    <!-- 头部工具栏 -->
    <ToolBar>
      <el-row :gutter="24" class="barMarginBottom">
        <el-col :span="24">
          <el-button
            v-show="$btnPermission.verify('MerchantsMenuAdd')"
            type="primary"
            :loading="loading"
            @click="addMenu"
            >新增</el-button
          >
        </el-col>
      </el-row>
    </ToolBar>

    <!-- 树形table表格 -->
    <TreePage
      :tree-datas.sync="merchantsMenuTreeDatas"
      :columns.sync="columns"
      :default-expand-all="false"
    ></TreePage>

    <!-- 新增 -->
    <MerchantsMenuAdd
      ref="merchantsMenuAdd"
      :title.sync="addMenuTitle"
      :rowId.sync="rowId"
      :menuParentId.sync="menuParentId"
      :showDialog.sync="addMenuVisible"
      @reloadData="loadTreeData"
    />
  </PageCard>
</template>
<script>
import PageCard from "@/components/PageCard/index.vue";
import ToolBar from "@/components/ToolBar/index.vue";
import TreePage from "@/components/TreePage/index.vue";

import MerchantsMenuAdd from "./../components/merchantsMenuAdd.vue";

import {
  merchantsMenuTreeList,
  merchantsMenuDelete,
} from "@/api/merchants/menu";

export default {
  name: "MerchantsMenuPage",
  components: {
    PageCard,
    ToolBar,
    TreePage,
    MerchantsMenuAdd,
  },
  data() {
    return {
      loading: false,
      merchantsMenuTreeDatas: [],
      columns: [
        {
          title: "菜单名称",
          name: "menuName",
          align: "center",
          width: 150,
        },
        {
          title: "菜单类型",
          name: "menuType",
          width: 150,
          align: "center",
          select: true,
          options: this.$config.MENU_TYPE,
        },
        {
          title: "权限值",
          name: "menuValue",
          align: "center",
          width: 300,
        },
        {
          title: "排序值",
          name: "menuSort",
          align: "center",
          width: 100,
        },
        {
          title: "操作",
          name: "operate",
          width: 200,
          operate: [
            {
              name: "添加下级",
              permission: "AddNext",
              fun: this.addNext,
            },
            {
              name: "编辑",
              permission: "MenuEdit",
              fun: this.editMenu,
              customStyle: {
                "margin-left": "10px",
              },
            },
            {
              name: "删除",
              confirm: true,
              message: "确定删除选择的数据吗?",
              permission: "MenuDelete",
              fun: this.deleteMenu,
              customStyle: {
                "margin-left": "10px",
              },
            },
          ],
        },
      ],
      addMenuVisible: false,
      menuParentId: null,
      addMenuTitle: null,
      rowId: null,
    };
  },
  created() {
    this.$nextTick(() => {
      this.loadTreeData();
    });
  },
  methods: {
    // 请求获取数据
    async loadTreeData() {
      const res = await merchantsMenuTreeList();
      this.merchantsMenuTreeDatas = res.data;
    },

    // 新增
    addMenu() {
      this.addMenuTitle = "新增";
      this.menuParentId = null;
      this.addMenuVisible = true;
    },
    // 添加下一级
    addNext(row) {
      if (!row) return;

      this.addMenuTitle = "新增";
      this.menuParentId = row.id;
      this.addMenuVisible = true;
    },
    // 编辑
    editMenu(row) {
      if (!row) return;

      this.rowId = row.id;
      this.addMenuTitle = "编辑";
      this.addMenuVisible = true;
    },
    // 删除数据
    async deleteMenu(row) {
      if (!row) return;

      await merchantsMenuDelete(row.id);
      this.$message.success("删除成功");
      this.loadTreeData();
    },
  },
};
</script>
<style lang="scss" scoped></style>
